<template>
	<view class="page">
		<view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()" right-text="保存" @clickRight="onSubmit"></uni-nav-bar>
		</view>
		
		<view class="nav_box"></view>
		
		<view class="auth-content-text">
			<view class="auth-title">员工设置</view>
			<view class="auth-text">员工入驻店铺需设置认证设置，请选择以下认证方式：</view>
		</view>
		
		<view class="list flex_center" @click="onNotAuth">
			<view class="left flex_center">
				<view class="icon">
					<image :src="$util.prefix('newstore/team_set_icon1.png')" mode="aspectFill"></image>
				</view>
				<view class="text">
					<view>无需认证</view>
					<text>无任何认证，均可成为商家员工</text>
				</view>
			</view>
			
			<view class="right">
				<image :src="$util.prefix(`public/select_q${not_auth ? '_s' : ''}.png`)" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="list flex_center" @click="onUserAuth" v-if="not_auth != 1">
			<view class="left flex_center">
				<view class="icon">
					<image :src="$util.prefix('newstore/team_set_icon2.png')" mode="aspectFill"></image>
				</view>
				<view class="text">
					<view>实名认证</view>
					<text>个人实名认证</text>
				</view>
			</view>
			
			<view class="right">
				<image :src="$util.prefix(`public/select_q${user_auth ? '_s' : ''}.png`)" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="list flex_center" @click="onCertificateAuth" v-if="not_auth != 1">
			<view class="left flex_center">
				<view class="icon">
					<image :src="$util.prefix('newstore/team_set_icon3.png')" mode="aspectFill"></image>
				</view>
				<view class="text">
					<view>资格认证</view>
					<text>个人实名认证及资格证书</text>
				</view>
			</view>
			
			<view class="right">
				<image :src="$util.prefix(`public/select_q${certificate_auth ? '_s' : ''}.png`)" mode="aspectFill"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				not_auth: 0,
				user_auth: 1,
				certificate_auth: 1,
			}
		},
		methods: {
			onNotAuth(){
				this.not_auth = this.not_auth == 1 ? 0 : 1;
			},
			
			onUserAuth(){
				this.user_auth = this.user_auth == 1 ? 0 : 1;
			},
			
			onCertificateAuth(){
				this.certificate_auth = this.certificate_auth == 1 ? 0 : 1;
			},
			
			onSubmit(){
				this.$post('/store/setStoreConfig',{
					not_auth: this.not_auth,
					user_auth: this.user_auth,
					certificate_auth: this.certificate_auth,
				}).then(res=>{
					this.$util.msg(res.msg);
				})
			},
			
			getStoreConf() {
				this.$post('/store/getStoreConf').then(res => {
					this.not_auth = res.data.not_auth;
					this.user_auth = res.data.user_auth;
					this.certificate_auth = res.data.certificate_auth;
				})
			},
			
		},
		
		onLoad() {
			this.getStoreConf();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		background: #FFFFFF;
		padding: 32rpx;
	}
	
	.nav_bar {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/newstore/new_store_background.png) 0 0 no-repeat;
		background-size: 100%;
	
		/deep/ .uni-nav-bar-right-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #FD2A53 !important;
		}
	}
	
	.auth-content-text {
		width: 100%;
		padding: 0 16rpx;
		.auth-title {
			font-weight: 500;
			font-size: 48rpx;
			color: #FD2A53;
			line-height: 66rpx;
		}
		
		.auth-text {
			font-size: 24rpx;
			color: #999999;
			line-height: 40rpx;
			margin: 24rpx 0 40rpx;
		}
	}
	
	.list {
		height: 176rpx;
		background: linear-gradient( 180deg, #FFF1F5 0%, #FFFFFF 100%);
		border-radius: 24rpx;
		border: 2rpx solid #FFEAEE;
		overflow: hidden;
		padding: 0 32rpx;
		margin-bottom: 20rpx;
		
		.left {
			flex: 1;
			overflow: hidden;
			.icon {
				width: 64rpx;
				height: 64rpx;
				margin-right: 16rpx;
				image {
					width: 64rpx;
					height: 64rpx;
				}
			}
			
			.text {
				view {
					font-weight: 500;
					font-size: 32rpx;
					color: #192031;
					line-height: 44rpx;
				}
				
				text {
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
				}
			}
		}
		
		.right {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	
</style>
